<template>
  <div class="swiper-container" ref="swiper-container">
    <div class="swiper-wrapper" :style="transform ? { transform: 'translate3d(0px, 0px, 0px)' } : ''">
      <div class="swiper-slide" :class="matchedName == item.name ? 'swiper-slide' : 'un-swiper-slide'"
        :style="{ widht: swiperSlide }" v-for="(item, index) in levelList" :key="index">
        <a style="cursor: pointer;" @click.prevent="handleLink(item)">
          <span class="navItem" :class="matchedName == item.name ? 'select' : 'unSelect'">
            {{ item.meta.title }}
          </span>
        </a>
        <i class="el-icon-close" :class="levelList.length > 1 ? 'closeIcon' : ''"
          @click.stop="levelList.length > 1 ? closeNavbar(item, index) : ''"></i>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
import Swiper from 'swiper';

export default {
  data () {
    return {
      levelList: null,
      matchedName: null,
      swipers: null,
      slidesPerView: null,
      swiperSlide: '120px !important',
      chooseLink: '',
      transform: false
    }
  },
  computed: {
    navbar () {
      return this.$store.state.user.navbar
    },
    routes () {
      return this.$router.options.routes
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  mounted () {
    console.log(this.navbar, 'navbar')
    this.getBreadcrumb()
    //监听窗口变化改变 swiper-slide 宽度
    window.addEventListener('resize', this.debounce(this.creatSwiper, 500))
  },
  methods: {
    //删除导航栏
    closeNavbar (data, index) {
      this.levelList = this.navbar.slice()
      if (this.levelList.length <= 1) {
        this.$message('导航栏最后一个无法删除')
      } else {
        if (this.$route.path == data.path) {
          if (this.levelList.length - 1 <= index) {
            this.$router.push(this.levelList[index - 1].path)
          } else {
            this.$router.push(this.levelList[index + 1].path)
          }
        } else {
          this.$router.push(this.$route.path)
        }
        this.levelList.splice(index, 1)
        console.log(this.levelList)
        this.$store.dispatch('user/changeNavBar', this.levelList)
      }
    },
    //防抖
    debounce (fn, delay) {
      let timer;
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn();
        }, delay);
      }
    },
    //创建swiper
    creatSwiper () {
      this.$nextTick(() => {
        this.swipers = new Swiper('.swiper-container', {
          observer: true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,//修改swiper的父元素时，自动初始化swiper
          slidesPerView: this.slidesPerView || 3,
          spaceBetween: 0,
          freeMode: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        })
      })
      let swiperWrapper = document.querySelector('.swiper-container');
      if (swiperWrapper) {
        this.slidesPerView = Math.floor(swiperWrapper.clientWidth / 120);
        this.swiperSlide = `${swiperWrapper.clientWidth / this.slidesPerView}px !important`;
      }
    },
    getBreadcrumb () {
      let navbar = this.navbar || []
      let matched = this.$route.matched.filter(item => item.meta && item.meta.barFlag)[0]
      let index = navbar.findIndex(item => item.name && item.name == matched.name)
      this.matchedName = matched.name
      this.levelList = navbar
      this.creatSwiper()
      if (index == -1) {
        this.levelList.push(matched)
        this.$store.dispatch('user/changeNavBar', this.levelList)
      }
    },
    isDashboard (route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile (path) {
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink (item) {
      const { name } = item
      name && this.$router.push({ name: item.name })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}

.swiper-container {
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  font-size: 14px;
  line-height: 45px;
  text-align: center;
  background: #ffffff;
  margin-right: 1px;

  .select {
    color: #59a1e8;
  }

  .unSelect {
    color: #78c0ed;
  }

  .closeIcon {
    padding: 10px;
    // display: none;
  }
}

.un-swiper-slide {
  background: #e9e9e9;
}

.swiper-slide:hover .closeIcon {
  opacity: 1;
}

.navItem {
  position: relative;
}

.el-icon-close {
  position: absolute;
  top: -5px;
  right: -5px;
  cursor: pointer;
  opacity: 0;
  color: #59a1e8;
}
</style>
